<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Range - Standalone</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/core.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-range value="20" aria-label="Range"></ion-range>
    <ion-range value="60" color="light" aria-label="Light Range"></ion-range>
    <ion-range value="80" color="dark" aria-label="Dark Range"></ion-range>
    <ion-range pin="true" color="secondary" value="86" aria-label="Dual Range">
      <ion-icon size="small" name="sunny" slot="start"></ion-icon>
      <ion-icon name="sunny" slot="end"></ion-icon>
    </ion-range>
    <ion-range pin="true" color="danger" value="54" aria-label="Danger Range">
      <ion-icon size="small" name="thermometer" slot="start"></ion-icon>
      <ion-icon name="thermometer" slot="end"></ion-icon>
    </ion-range>
    <ion-range value="50" pin class="custom" aria-label="Pin Range"></ion-range>
    <ion-range value="150" pin color="tertiary" class="custom" aria-label="Custom Range"></ion-range>

    <style>
      .custom {
        --knob-background: purple;
        --bar-background: papayawhip;
        --bar-background-active: hotpink;
        --bar-height: 3px;
        --pin-background: pink;
        --pin-color: purple;
      }
    </style>
  </body>
</html>
